﻿@model List<HouseCrawler.Web.Models.HouseDashboard>
@using HouseCrawler.Web;

<!doctype html>
<html class="no-js" lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>地图搜房</title>
    <meta name="description" content="写点什么好呢？鬼知道呀！" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="alternate icon" type="image/png" href="/favicon.png">
    <link rel="stylesheet" href="~/hometemplate/views/IMJ2V2/css/amazeui.min.css">
    <link href="~/hometemplate/views/IMJ2V2/css/style.css" rel="stylesheet" />
    <script src="~/DomainJS/umeng.js"></script>
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.js"></script>

    <![endif]-->
</head>
<!--[if lt IE 9]>
<div class="am-modal am-modal-no-btn am-modal-active" tabindex="-1" id="doc-modal-1" style="display: block; width: 400px; margin-left: -200px; margin-top: -112px;">
<div class="am-modal-dialog">
<div class="am-modal-hd">365 安全卫士提醒</div>
<div class="am-modal-bd">你的浏览器太古董了，还不换一个你就奥特曼了
    <a href="http://browsehappy.com/" target="_blank" class="am-btn am-btn-danger am-btn-sm am-radius" rel="nofollow">速速点击换一个</a>
    </div>
</div>
</div>
<![endif]-->
<body>
    <header class="m-hd">
        <section data-am-sticky class="am-show-md-up">
            <div class="am-container">
                <a href="/" rel="nofollow">Your House or Your Home</a>
                <!--        <ul class="am-fr m-about">
                            <li><a href="/about/" class="am-btn am-btn-danger am-btn-sm am-radius" rel="nofollow">关于我们</a></li>
                            <li><a href="/contact/" class="am-btn am-btn-danger am-btn-sm am-radius" rel="nofollow">联系我们</a></li>
                        </ul> -->
                <nav>
                    <ul class="m-nav am-nav am-nav-pills am-fr">
                        <li><a href="/" rel="nofollow">网站首页</a></li>
                        <li class="am-dropdown" data-am-dropdown>
                            <a href="#" rel="nofollow" class="am-dropdown-toggle" data-am-dropdown-toggle>热门城市 <span class="am-icon-caret-down"></span></a>
                            <ul class="am-dropdown-content">
                                <li><a href="~/Home/HouseList?cityname=北京" target="_blank" rel="nofollow">北京</a></li>
                                <li><a href="~/Home/HouseList?cityname=上海" target="_blank" rel="nofollow">上海</a></li>
                                <li><a href="~/Home/HouseList?cityname=广州" target="_blank" rel="nofollow">广州</a></li>
                                <li><a href="~/Home/HouseList?cityname=深圳" target="_blank" rel="nofollow">深圳</a></li>
                                <li><a href="~/Home/HouseList?cityname=杭州" target="_blank" rel="nofollow">杭州</a></li>
                                <li><a href="~/Home/HouseList?cityname=成都" target="_blank" rel="nofollow">成都</a></li>
                            </ul>
                        </li>
                        <li><a href="~/Home/MessageList" rel="nofollow">最新动态</a></li>
                        <li><a href="#divContactLiguobao" rel="nofollow">联系我？</a></li>
                    </ul>
                </nav>
        </section>

        </div>
        <nav data-am-widget="header" class="am-header am-show-sm-only">
            <div class="am-header-left am-header-nav">
                <a href="/" rel="nofollow">
                    <i class="am-header-icon am-icon-home"></i> 首页
                </a>
            </div>
            <h1 class="am-header-title">
                <a href="/" rel="nofollow">地图搜房</a>
            </h1>
            <div class="am-header-right am-header-nav">
                <a href="#right-link" class="" data-am-offcanvas="{target: '#r-nav'}">
                    <i class="am-header-icon am-icon-bars"></i> 菜单
                </a>
            </div>
        </nav>

        <!-- 侧边栏内容 -->
        <div id="r-nav" class="am-offcanvas">
            <div class="am-offcanvas-bar am-offcanvas-bar-flip">
                <nav class="am-offcanvas-content">
                    <a href="/" rel="nofollow"><span class="logo"></span></a>
                    <p><i class="am-icon-home"></i> <a href="/" rel="nofollow">网站首页</a></p>

                    <p><i class="am-icon-credit-card"></i> <a href="#" rel="nofollow">城市列表</a></p>

                    @foreach (var cityGroup in Model.GroupBy(c => c.CityName))
                    {
                        var cityName = cityGroup.First().CityName;
                        <p><a href="~/Home/HouseList?cityname=@cityName" target="_blank">@cityName</a></p>
                    }
                </nav>
            </div>
        </div>
    </header>
    <div data-am-widget="slider" class="am-slider am-slider-i2" data-am-flexslider="{controlNav:false}">
        <ul class="am-slides">
            <li class="am-slider-images" style="background-image: url(/hometemplate/views/IMJ2V2/images/banner1.jpg)">
                <div class="am-container am-slider-desc">
                    <div class="am-slider-content">
                        <h2 class="am-slider-title am-animation-slide-left" data-am-scrollspy="{animation: 'slide-left', delay: 100}">找房子心力交瘁？试试地图搜房吧。</h2>
                        <p data-am-scrollspy="{animation:'slide-right', delay: 600}" class="am-animation-slide-right">爬虫 + 高德地图强力驱动...</p>
                        <a href="#read-more" class="am-btn-xs am-btn am-btn-danger am-radius am-animation-slide-bottom am-animation-delay-1" rel="nofollow" data-am-scrollspy="{animation:'slide-bottom', delay: 100}">READ MORE</a>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div id="read-more" class="m-services m-home-box">
        @* 用于锚点定位的...感觉有点傻。 *@
    </div>
    <div class="m-services m-home-box">
        <section class="am-container">
            <hgroup class="am-animation-slide-top" data-am-scrollspy="{animation:'slide-bottom', delay: 0}">
                <h2>这是什么？</h2>
                <p>通过实时爬虫获取公开租房信息，直接在高德地图上直观展示租房信息，同时提供住址到公司的路线计算（公交+地图 or 步行导航），已实现【豆瓣租房小组】、【CCB建融家园】、【Zuber合租平台】、【58同城品牌公寓】、【58同城诚信租房】、【上海互助租房】数据展示，部分房源价格支持筛选功能。</p>
            </hgroup>
            <ul class="am-avg-sm-2 am-avg-md-3 am-avg-lg-6 am-thumbnails">
                <li class="am-animation-slide-bottom am-animation-delay-1" data-am-scrollspy="{animation:'slide-top', delay: 50}">
                    <h2><a href="~/Home/HouseList?cityname=上海" target="_blank">上海地区</a></h2>
                    <p>上海互助租房、58同城品牌公寓、豆瓣租房小组</p>
                </li>
                <li class="am-animation-slide-top" data-am-scrollspy="{animation:'slide-top', delay: 0}">
                    <h2><a href="~/Home/HouseList?cityname=北京" target="_blank">北京地区</a></h2>
                    <p>58同城品牌公寓、豆瓣小组</p>
                </li>
                <li class="am-animation-slide-top" data-am-scrollspy="{animation:'slide-top', delay: 0}">
                    <h2><a href="~/Home/HouseList?cityname=广州" target="_blank">广州地区</a></h2>
                    <p>58同城品牌公寓、豆瓣小组</p>
                </li>
                <li class="am-animation-slide-top" data-am-scrollspy="{animation:'slide-top', delay: 0}">
                    <h2><a href="~/Home/HouseList?cityname=深圳" target="_blank">深圳地区</a></h2>
                    <p>58同城品牌公寓、豆瓣小组</p>
                </li>
                <li class="am-animation-slide-top" data-am-scrollspy="{animation:'slide-top', delay: 100}">
                    <h2><a href="#"  data-am-modal="{target: '#more-cityHouseInfo', closeViaDimmer: 0 ,width: 900,height:600}">More</a></h2>
                    <p>成都、杭州、厦门...</p>
                </li>
                <li class="am-animation-slide-top" data-am-scrollspy="{animation:'slide-top', delay: 100}">
                    <h2><a href="#" data-am-modal="{target: '#divHouseSearch', closeViaDimmer: 0 ,width: 400, height : 300}">高级搜索</a></h2>
                    <p>很高级...</p>
                </li>
            </ul>

            <ul class="am-avg-sm-2 am-thumbnails">
                <li class="am-animation-slide-top" data-am-scrollspy="{animation:'slide-top', delay: 200}" style="width:80%">
                    <h2><a href="#" data-am-modal="{target: '#addCityHouseInfo', closeViaDimmer: 0 ,width: 400,}">新增豆瓣租房小组</a></h2>
                    <p>你在的城市没有数据？没有对应的租房小组数据？试试手动添加爬虫任务吧！（如：厦门租房小组 https://www.douban.com/group/XMhouse/）</p>
                   
                </li>
            </ul>

        </section>

    </div>


    <div class="am-modal am-modal-no-btn" tabindex="-1" id="divHouseSearch">
        <div class="am-modal-dialog">
            <div class="am-modal-hd">
                高级搜索功能
                <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
            </div>
            <div class="am-modal-bd">
               
                <div class="am-form-group">
                    <select id="select-cityname" style="width:100%" class="am-text-lg">
                        @foreach (var cityName in Model.Select(city => city.CityName).Distinct())
                        { 
                            <option value="@cityName">@cityName</option>
                        }
                    </select>
                </div>
                <div class="am-form-group">
                    <select id="select-source" style="width:100%" class="am-text-lg">
                        <option value="douban">豆瓣租房小组</option>
                        <option value="zuber">Zuber合租平台</option>
                        <option value="ccbhouse">CCB建融家园</option>
                        <option value="huzhuzufang">上海互助租房</option>
                        <option value="pinpaigongyu">58同城品牌公寓</option>
                        <option value="">全部</option>

                    </select>
                </div>

                <div class="am-form-group">
                    <input style="width:100%" class="am-text-lg am-input-lg" id="input-withAnyDays" placeholder="几天内的数据？默认十天" value="10" type="number">
                </div>

                <div class="am-form-group">
                    <input style="width:100%" class="am-text-lg am-input-lg" id="input-keyword" placeholder="搜索关键字">
                </div>


                <button type="button" class="am-btn am-btn-default am-round am-btn-secondary am-btn-xl" id="btn-StartSearch">开始搜索...</button>
            </div>
        </div>
    </div>








    
    <div class="am-modal am-modal-no-btn" tabindex="-1" id="addCityHouseInfo">
            <div class="am-modal-dialog">
                <div class="am-modal-hd">
                    新增豆瓣租房小组
                    <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
                </div>
                <div class="am-modal-bd">
                    <div class="am-form-group">
                     <label>厦门租房:<a href="https://www.douban.com/group/XMhouse/ "  target="_blank">www.douban.com/group/XMhouse</a></label>
                    </div>
                    <div class="am-form-group">
                        <input  style="width:100%" class="am-text-lg am-input-lg" id="doc-ipt-cityName" placeholder="（如：厦门）">
                    </div>
                    <div class="am-form-group">
                        <input  style="width:100%" class="am-text-lg" id="doc-ipt-douban" placeholder="（豆瓣小组GroupID,如：XMhouse）">
                    </div>
                    <button type="button" class="am-btn am-btn-default am-round am-btn-secondary am-btn-xl" id="btn-SaveDoubanGroup">添加此豆瓣小组数据</button>
                </div>
            </div>
   </div>


    <div class="am-modal am-modal-no-btn" tabindex="-1" id="more-cityHouseInfo" >
        <div class="am-modal-dialog" style="width:900px;height:600px;overflow-y:scroll;">
            <div class="am-modal-hd">
                全部城市
                <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
            </div>
            <div class="am-modal-bd">
                <ul class="am-avg-sm-2 am-avg-md-3 am-avg-lg-6 am-thumbnails" id="more-cityHouseInfo">
                    @foreach (var cityGroup in Model.GroupBy(c => c.CityName))
                    {
                        var cityName = cityGroup.First().CityName;
                        <li class="am-animation-slide-top">
                            <h2><a href="~/Home/HouseList?cityname=@cityName" target="_blank">@cityName</a></h2>
                            <p>
                                @foreach (var cityHouseInfo in cityGroup)
                                {
                                    var sum = cityHouseInfo.HouseSum >9999 ? "9999+":cityHouseInfo.HouseSum.ToString();
                                    <a href="~/Home/HouseList?cityname=@cityName&source=@cityHouseInfo.Source&intervalDay=7&houseCount=500" target="_blank">
                                      @ConstConfigurationName.ConvertToDisPlayName(cityHouseInfo.Source) (@sum)
                                    </a>
                                    <br />
                                    
                                }
                            </p>
                        </li>
                    }
                </ul>
            </div>
        </div>
    </div>





    <hr>
    <section class="am-container m-home-box m-partner">

        <hgroup data-am-scrollspy="{animation:'slide-bottom', delay: 100}">
            <h2>感谢他们</h2>
            <p>灵感+部分代码来源实验楼<a href="https://www.shiyanlou.com/user/8834/" target="_blank">ekCit</a>的 
            <a href="https://www.shiyanlou.com/courses/599" target="_blank">高德API+Python解决租房问题</a>课程，感谢他...</p>
        </hgroup>
        <ul class="am-avg-lg-8 am-avg-md-8 am-avg-sm-2  am-thumbnails" data-am-scrollspy="{animation:'slide-bottom', delay: 100}">
            <li data-am-scrollspy="{animation:'slide-bottom', delay: 44}">
                <img src="~/hometemplate/views/IMJ2V2/images/tencent.png" alt="腾讯" class="am-img-responsive">
            </li>
        
            <li data-am-scrollspy="{animation:'slide-bottom', delay: 72}">
                <img src="~/hometemplate/views/IMJ2V2/images/microsoft.png" alt="微软" class="am-img-responsive">
            </li>
            <li data-am-scrollspy="{animation:'slide-bottom', delay: 399}">
                <img src="~/hometemplate/views/IMJ2V2/images/aliyun.png" alt="阿里云" class="am-img-responsive">
            </li>
        </ul>


    </section>



    <div class="m-services m-home-box" id="divContactLiguobao">
        <section class="am-container">
            <hgroup data-am-scrollspy="{animation:'slide-bottom', delay: 100}">
                <h2>联系我？试试下面的方式咯。</h2>
                @*<p>试试下面的方式咯。</p>*@
            </hgroup>
            <ul class="am-avg-lg-4 am-avg-md-4 am-avg-sm-2 am-thumbnails">
                <li data-am-scrollspy="{animation:'slide-bottom', delay: 50}">
                    知乎：<a href="https://www.zhihu.com/people/codelover" target="_blank">李国宝</a>
                </li>
                <li data-am-scrollspy="{animation:'slide-bottom', delay: 50}">
                    GitHub: <a href=" https://github.com/liguobao/58HouseSearch" target="_blank">58HouseSearch（求Star）</a>
                </li>

                <li data-am-scrollspy="{animation:'slide-bottom', delay: 50}">
                    邮件：codelover@qq.com
                </li>
            </ul>

        </section>
        <br />
        <br />
        <br />
    </div>

    <!--[if lt IE 9]>
    <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
    <script src="views/IMJ2V2/js/polyfill/rem.min.js"></script>
    <script src="views/IMJ2V2/js/polyfill/respond.min.js"></script>
    <script src="views/IMJ2V2/js/amazeui.legacy.js"></script>
    <![endif]-->
    <script src="~/hometemplate/views/IMJ2V2/js/echo.min.js"></script>
    <script>
        echo.init({
            offset: 100,
            throttle: 250,
            unload: false,
            callback: function (element, op) {
                console.log(element, 'has been', op + 'ed')
            }
        });
  // 图片赖加载
    </script>
    <!--[if (gte IE 9)|!(IE)]><!-->
    <script src="~/hometemplate/views/IMJ2V2/js/jquery.min.js"></script>
    <script src="~/hometemplate/views/IMJ2V2/js/amazeui.min.js"></script>
    <!--<![endif]-->
    <script src='~/hometemplate/views/IMJ2V2/js/jquery.qrcode.min.js'></script>
    <script type="text/javascript">
        $(function () {
            var str = "http://www.imj2.com";
            $("#code").qrcode({
                render: "table",
                width: 100,
                height: 100,
                text: str
            });

            $('#btn-SaveDoubanGroup').bind('click', function (e) {
                e.preventDefault();
                var doubanGroup = $('#doc-ipt-douban').val();
                var cityName = $('#doc-ipt-cityName').val()
                $('#btn-SaveDoubanGroup').attr("disabled", true);

                $.ajax({
                    type: "post",
                    url: "../Home/AddDouBanGroup",
                    data: { doubanGroup: doubanGroup, cityName: cityName },
                    success: function (result) {
                        if (result.isSuccess) {
                            alert("新增成功！正在刷新数据...");
                            location.reload();
                        } else {
                            console.log(result.error);
                        }
                        $('#btn-SaveDoubanGroup').attr("disabled", false);
                    }
                });

                e.stopPropagation();
            });


            $('#btn-StartSearch').bind('click', function (e) {
                e.preventDefault();
                var cityname = $('#select-cityname').val();
                var source = $('#select-source').val();
                var intervalDay = $('#input-withAnyDays').val();
                var keyword = $('#input-keyword').val();

                var searchHouseURL = "../Home/HouseList?cityname=" + cityname;

                if (source && source != "") {
                    searchHouseURL = searchHouseURL  + "&source=" + source;
                }
                if (intervalDay != "") {
                    searchHouseURL = searchHouseURL + "&intervalDay=" + intervalDay;
                }
                if (keyword && keyword != "") { 
                    searchHouseURL = searchHouseURL + "&keyword=" + keyword;
                }
                window.open(searchHouseURL);   
                e.stopPropagation();
            });


            if (document.getElementById("bdmark") != null) {
                $('body').removeClass('is-mobile');
            }
            var urlhash = window.location.hash;
            if (!urlhash.match("fromapp")) {
                if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios|iPad|Mobile)/i))) {
                    $('body').addClass('is-mobile');
                }
            }

        })
        // 二维码生成
        //返回顶部
        function imj2() {
            this.init();
        }
        imj2.prototype = {
            constructor: imj2,
            init: function () {
                this._initBackTop();
            },
            _initBackTop: function () {
                var $backTop = this.$backTop = $('<div class="m-top-cbbfixed">' +
                    '<a class="m-top-weixin m-top-cbbtn"">' +
                    '<span class="m-top-weixin-icon"></span><div></div>' +
                    '</a>' +
                    '<a class="m-top-go m-top-cbbtn">' +
                    '<span class="m-top-goicon"></span>' +
                    '</a>' +
                    '</div>');
                $('body').append($backTop);

                $backTop.click(function () {
                    $("html, body").animate({
                        scrollTop: 0
                    }, 120);
                });

                var timmer = null;
                $(window).bind("scroll", function () {
                    var d = $(document).scrollTop(),
                        e = $(window).height();
                    0 < d ? $backTop.css("bottom", "10px") : $backTop.css("bottom", "-90px");
                    clearTimeout(timmer);
                    timmer = setTimeout(function () {
                        clearTimeout(timmer)
                    }, 100);
                });
            }

        }
        var imj2 = new imj2();


       
//end返回顶部
    </script>
    

</body>
</html>